<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="assets/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>会员注册</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
    <meta name="viewport" content="width=device-width"/>

    <!--     Fonts and icons     -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">

    <!-- CSS Files -->
    <link href="../../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../../plugins/bootstrap/css/gsdk-bootstrap-wizard.css" rel="stylesheet"/>

    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="../../plugins/bootstrap/css/demo.css" rel="stylesheet"/>

    <script src="../../plugins/bootstrap/js/jquery-2.2.4.min.js" type="text/javascript"></script>
</head>

<body>
<div class="image-container set-full-height" style="background-image: url('assets/img/wizard.jpg')">
    <!--   Creative Tim Branding   -->
    <a href="#">
        <div class="logo-container">
            <div class="logo">
                <img src="assets/img/new_logo.png">
            </div>
            <div class="brand">
                爱妹子
            </div>
        </div>
    </a>

    <!--  Made With Get Shit Done Kit  -->
    <a href="#" class="made-with-mk">
        <div class="brand">Z</div>
        <div class="made-with">Made with <strong>Mr.Zhao</strong></div>
    </a>

    <!--   Big container   -->
    <div class="container">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">

                <!--      Wizard container        -->
                <div class="wizard-container">

                    <div class="card wizard-card" data-color="orange" id="wizardProfile">
                        <form class="form-horizontal" id="maniForm" >
                            <!--        You can switch ' data-color="orange" '  with one of the next bright colors: "blue", "green", "orange", "red"          -->

                            <div class="wizard-header">
                                <h3>
                                    <b>爱妹子俱乐部</b> 会员注册 <br>
                                    <small>欢迎加入爱妹子俱乐部！</small>
                                </h3>
                            </div>

                            <div class="wizard-navigation">
                                <ul>
                                    <li><a href="#about" data-toggle="tab">基本信息</a></li>
                                    <li><a href="#address" data-toggle="tab">联系方式</a></li>
                                    <li><a href="#picture" data-toggle="tab">生活照片</a></li>
                                </ul>
                            </div>

                            <div class="tab-content">
                                <div class="tab-pane" id="about">
                                    <div class="row">
                                        <h4 class="info-text"> 请认真填写您的个人信息</h4>
                                        <div class="col-sm-5 col-sm-offset-1">
                                            <div class="form-group">
                                                <label for="username" class="col-sm-3 control-label">姓名:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" name="username" id="username" placeholder="please input your name" required/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="inlineCheckbox1" class="col-sm-3 control-label">性别:</label>
                                                <div class="col-sm-9" style="height: 40px;" align="center">
                                                    <label class="radio-inline">
                                                        <input type="radio" name="sex" id="inlineCheckbox1" value="1" CHECKED> 女
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" name="sex" id="inlineCheckbox2" value="2"> 男
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="job" class="col-sm-3 control-label">职业:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" class="form-control" name="job" id="job"
                                                           placeholder="please input your job"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-5" >
                                            <div class="form-group">
                                                <label for="birthday" class="col-sm-3 control-label">生日:</label>
                                                <div class="col-sm-9">
                                                    <input type="date" name="birthday" class="form-control" id="birthday" required/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="height" class="col-sm-3 control-label">身高:</label>
                                                <div class="col-sm-9">
                                                    <input type="number" name="height" class="form-control" id="height" placeholder="please input your height" required/>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="interest" class="col-sm-3 control-label">爱好:</label>
                                                <div class="col-sm-9">
                                                    <input type="text" name="interest" class="form-control" id="interest" placeholder="please input your interest"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="form-group">
                                                <label>发展目标</label>
                                                <input name="plan" type="text" class="form-control" placeholder="what will your doing ?">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="address">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <h4 class="info-text"> 我们怎样联系你? </h4>
                                        </div>
                                        <div class="col-sm-5 col-sm-offset-1">
                                            <div class="form-group">
                                                <label>手机号码</label>
                                                <input type="text" name="telphone" class="form-control" placeholder="132********" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <label>电子邮箱</label>
                                                <input type="email" name="email" class="form-control" placeholder="xxx@gmail.com">
                                            </div>
                                        </div>
                                        <div class="col-sm-5 col-sm-offset-1">
                                            <div class="form-group">
                                                <label>QQ号码</label>
                                                <input type="number" name="qq" class="form-control" placeholder="88888888" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <label>微信号码</label>
                                                <input type="text" name="weixin" class="form-control" placeholder="xxx8888888" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-5 col-sm-offset-1">
                                            <div class="form-group">
                                                <label>新浪微博</label>
                                                <input type="text" name="sina" class="form-control" placeholder="88888888" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="form-group">
                                                <label>腾讯微博</label>
                                                <input type="text" name="txwb" class="form-control" placeholder="xxx8888888">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="picture">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <h4 class="info-text"> your nice picture ? </h4>
                                        </div>
                                        <div class="col-sm-3 col-sm-offset-1">
                                            <div class="picture-container">
                                                <div class="picture">
                                                    <img src="assets/img/default-avatar.png" class="picture-src"
                                                         id="wizardPicturePreview" title=""/>
                                                    <input type="file" name="file" id="wizard-picture">
                                                </div>
                                                <h6>Choose Picture</h6>
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-sm-offset-1">
                                            <div class="picture-container">
                                                <div class="picture">
                                                    <img src="assets/img/default-avatar.png" class="picture-src" id="wizardPicturePreview2" title=""/>
                                                    <input type="file" name="file" id="wizard-picture2">
                                                </div>
                                                <h6>Choose Picture</h6>
                                            </div>
                                        </div>
                                        <div class="col-sm-3 col-sm-offset-1">
                                            <div class="picture-container">
                                                <div class="picture">
                                                    <img src="assets/img/default-avatar.png" class="picture-src"
                                                         id="wizardPicturePreview3" title=""/>
                                                    <input type="file" name="file" id="wizard-picture3">
                                                </div>
                                                <h6>Choose Picture</h6>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="wizard-footer height-wizard">
                                <div class="pull-right">
                                    <input type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm'
                                           name='next' value='下一步'/>
                                    <input type='button' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm'
                                           name='finish' id="button_submit" value='提交'/>

                                </div>

                                <div class="pull-left">
                                    <input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm'
                                           name='previous' value='上一步'/>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                        </form>
                    </div>
                </div> <!-- wizard container -->
            </div>
        </div><!-- end row -->
    </div> <!--  big container -->

    <div class="footer">
        <div class="container">
            <i class="fa fa-heart heart"></i> <a href="#">爱妹子俱乐部</a>成立于2018-08-01 - 俱乐部QQ群：371010
        </div>
    </div>

</div>

</body>

<!--   Core JS Files   -->

<script src="../../plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../plugins/bootstrap/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

<!--  Plugin for the Wizard -->
<script src="../../plugins/bootstrap/js/gsdk-bootstrap-wizard.js"></script>

<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
<script src="../../plugins/bootstrap/js/jquery.validate.min.js"></script>
<!-- layer -->
<script src="../../plugins/layer/layer.js"></script>
<script>
    layer.open({
        type: 2,
        title: ["爱妹子俱乐部入会协议", 'font-size:18px;'],
        closeBtn: 0, //不显示关闭按钮
        shade: [0],
        shadeClose: false,
        area: ['893px', '600px'],
        offset: 'auto', //水平居中
       // time: 30000, //30秒后自动关闭
        maxmin: false,//不开启最大按钮
        anim: 0,//动画类型
        skin: 'layui-layer-molv',
        content: ['readme.html', 'yes'], //iframe的url，yes代表显示滚动条
        end: function () { //此处用于演示
        },
        btn: ['同意', '不同意',],
        yes: function (index, layero) {
            layer.close(index); //如果设定了yes回调，需进行手工关闭
        },
        btn2: function (index, layero) {
            //按钮【按钮二】的回调
            alert('你选择不同意，将不能注册本俱乐部！');
            return false;//开启该代码可禁止点击该按钮关闭
        },
        btnAlign: 'c'
    });

    $("#button_submit").click(function () {
        layer.load();
        /**
         * 使用from表单异步提交上传文件时，只需要申明表单的id和样式。其他的FormData会自动进行封装
         * @type {FormData} 封装表单数据对象，专用解决from表单一步提交的问题
         */
        var form = new FormData($("#maniForm")[0]);
        $.ajax({
            url:"/register/add",
            type:"post",
            data:form,
            processData:false,
            contentType:false,
            success:function(r){
                layer.closeAll('loading');
                if(r.code == 0){
                    window.location.href="success.html"
                }else {
                    layer.alert(r.msg);
                }
            },
            error:function(e){
                layer.closeAll('loading');
                alert("网络错误！");
            }
        });
    });
</script>
</html>
